<template>
    <div>
        <el-submenu 
                :index="item.menuPath"
                v-if="item.children.length > 0">
                <template slot="title">
                    <i :class="item.menuIcon"></i>
                    <span>{{ item.menuName }}</span>
                </template>
                
                <!-- 递归调用自身 -->
                <myitem 
                    v-for="(child) in item.children"
                    :key="child.menuId"
                    :item="child"
                    />
        </el-submenu>
            <!-- 如果没有子菜单，则显示当前内容 -->
        <el-menu-item 
                v-else
                :key="item.menuId.toString()"
                :index="item.menuPath" >
                <i :class="item.menuIcon"></i>
                <span slot="title">{{ item.menuName }}</span>
        </el-menu-item>
    </div>
</template>
<script>
export default {
  name: "myitem",
  props: {
    item: {
        type: Object,
        required: true,    
        },
  },
  // 注意： 在template标签上使用v-for，:key="index"不能写在template标签上，因为其标签不会被渲染，会引起循环错误
  data(){
  }
};
</script>